<template>
  <div>
    <van-tabbar fixed route>
      <van-tabbar-item to="/" icon="wap-home-o">
        首页
      </van-tabbar-item>
      <!-- <van-tabbar-item to="/messages" v-if="badge == 0" icon="chat-o">
        消息
      </van-tabbar-item>
      <van-tabbar-item v-else to="/messages" icon="chat-o" :badge="badge">
        消息
      </van-tabbar-item> -->
      <van-tabbar-item to="/allTypeJobs?id=1" icon="add-o">
        发布
      </van-tabbar-item>
      <!--      <van-tabbar-item to="/market" icon="shopping-cart-o">
        商城
      </van-tabbar-item>-->
      <van-tabbar-item to="/mine" icon="user-o">
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import bus from '../utils/bus.js'
import {mapState, mapActions} from 'vuex'
export default {
  name: 'TabBar',
  data() {
    return {
      active: 0,
      badge: 0
    }
  },
  computed: {
    getCount: function() {
      return this.$store.getters.getCountNum
    },
    chatUserList: function() {
      return this.$store.getters.getChatUserList
    },
    msg: function() {
      return this.$store.getters.getMsgFn
    }
  },
  watch: {
    msg: 'newMsgFU'
  },
  mounted() {
    bus.$on('sendCount', data => {
      if (this.badge > 0) {
        this.badge = this.badge - data
      }
    })
  },
  methods: {
    newMsgFU() {
      //更新新消息

      this.badge++
      return false
      let msgData = JSON.parse(this.msg)
      // console.log(msgData)
      // console.log(this.meassgeList)
      for (var i = 0; i < this.meassgeList.length; i++) {
        if (msgData.SendUserId == this.meassgeList[i].UserId) {
          this.meassgeList[i].LastMessage = msgData.MessageContent

          if (this.meassgeList[i].isRead == 1) {
            this.meassgeList[i].isRead = 1
            this.isReadCount++
          } else {
            this.meassgeList[i].isRead = 1
          }
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
